<template>
  <div class="all-comment">
    <div class="all-comment__top">
      <div class="all-comment__top__left">{{ totallCommentsShow }}</div>
      <div class="all-comment__top__right">
        <div
          :class="tabIndex == 0 ? 'all-comment__top__right__item--active' : 'all-comment__top__right__item'"
          @click="getHotCommentList"
        >
          最新
        </div>
        <div
          :class="tabIndex == 1 ? 'all-comment__top__right__item--active' : 'all-comment__top__right__item'"
          @click="getLastCommentList"
        >
          最热
        </div>
      </div>
    </div>
    <div class="all-comment__line"></div>
    <div class="all-comment__content">
      <CommentItem
        v-for="(comment, index) in showCommentList"
        :comment="comment"
        :initReplyShow="initReplyShow"
        :key="index"
      />
      <div class="all-comment__tip--none" v-show="isShowMore">
        没有更多数据了
        <!-- <img src="../../assets/images/icons/icon_arrow_up_grey.png" alt="" class="all-comment__tip__img--none" /> -->
      </div>
      <div class="all-comment__tip" v-show="!isShowMore" @click="addShowCommentListData">
        <span class="all-comment__tip__pre">更多评论</span>
        <img
          src="../../assets/images/icons/icon_arrow_right_blue.png"
          alt=""
          class="all-comment__tip__img"
          v-show="!isLoading"
        />
        <Loading :loading="isLoading" v-show="isLoading" />
      </div>
    </div>
  </div>
</template>
<script>
import CommentItem from "./CommentItem";
import Loading from "../../components/Loading";

// 所有评论处理中心 组件
export default {
  name: "AllComment",
  props: {
    //初次展示的回复量
    initReplyShow: {
      type: Number,
      default: 2,
    },
    //初次展示的评论量
    initCommentShow: {
      type: Number,
      default: 3,
    },
  },
  components: {
    CommentItem,
    Loading,
  },
  computed: {
    // 显示用户评论数量
    totallCommentsShow() {
      return "全部评论（" + this.totallComments + ")";
    },
    //是否显示更多数据
    isShowMore() {
      return this.commentList.length == this.showCommentList.length;
    },
  },
  created() {
    this.addShowCommentListData();
  },
  methods: {
    //获取热点评论
    getHotCommentList() {
      this.tabIndex = 0;
      this.commentList.reverse();
    },
    // 给予显示评论数据
    addShowCommentListData() {
      this.isLoading = true;
      const timer = setInterval(() => {
        this.isLoading = false;
        this.currentComments += this.initCommentShow;
        this.showCommentList = this.commentList.slice(0, this.currentComments - 1);
        clearInterval(timer);
      }, 500);
    },
    //移除部分显示数据
    reduceShowCommentListData() {
      this.currentComments = this.currentComments - this.initCommentShow;
      this.showCommentList = this.commentList.slice(0, this.currentComments - 1);
    },
    //获取最新评论
    getLastCommentList() {
      this.tabIndex = 1;
      this.commentList.reverse();
    },
  },
  data() {
    return {
      // 总评论数
      totallComments: 500,
      // 当前显示评论数
      currentComments: 0,
      // 评论数据来源
      tabIndex: 1,
      //加载中
      isLoading: false,
      //显示的数据,
      showCommentList: [],
      commentList: [
        {
          //评论人名称
          name: "张三三",
          //评论人头像
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409",
          //多久前评论
          time: "3小时",
          // 评论设备
          device: "Flexpai2",
          // 评论内容
          comment: "全新的用户体验",
          //点赞次数
          tags: 50,
          //回复数据
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
              //被@用户名
              replyName: "张成成",
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          name: "刘大大",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-cf2c06912b60cbee42890c960faa5f03_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=2d76d22b6b3270422879c1e91a0f1a03",
          time: "3小时",
          device: "Flexpai2",
          comment: "全新的用户体验",
          tags: 50,
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          //评论人名称
          name: "张三三",
          //评论人头像
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409",
          //多久前评论
          time: "3小时",
          // 评论设备
          device: "Flexpai2",
          // 评论内容
          comment: "全新的用户体验",
          //点赞次数
          tags: 50,
          //回复数据
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
              //被@用户名
              replyName: "张成成",
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          name: "刘大大",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-cf2c06912b60cbee42890c960faa5f03_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=2d76d22b6b3270422879c1e91a0f1a03",
          time: "3小时",
          device: "Flexpai2",
          comment: "全新的用户体验",
          tags: 50,
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          //评论人名称
          name: "张三三",
          //评论人头像
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409",
          //多久前评论
          time: "3小时",
          // 评论设备
          device: "Flexpai2",
          // 评论内容
          comment: "全新的用户体验",
          //点赞次数
          tags: 50,
          //回复数据
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
              //被@用户名
              replyName: "张成成",
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          name: "刘大大",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-cf2c06912b60cbee42890c960faa5f03_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=2d76d22b6b3270422879c1e91a0f1a03",
          time: "3小时",
          device: "Flexpai2",
          comment: "全新的用户体验",
          tags: 50,
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          //评论人名称
          name: "张三三",
          //评论人头像
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409",
          //多久前评论
          time: "3小时",
          // 评论设备
          device: "Flexpai2",
          // 评论内容
          comment: "全新的用户体验",
          //点赞次数
          tags: 50,
          //回复数据
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
              //被@用户名
              replyName: "张成成",
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
        {
          name: "刘大大",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-cf2c06912b60cbee42890c960faa5f03_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=2d76d22b6b3270422879c1e91a0f1a03",
          time: "3小时",
          device: "Flexpai2",
          comment: "全新的用户体验",
          tags: 50,
          replyList: [
            {
              name: "李思思",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F18%2F20210218234737_ce4cf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=994cc62c8b174bfe20dce9f51cfd42d5",
              time: "3小时",
              device: "Flexpai2",
              comment: "沙发",
              tags: 500,
            },
            {
              name: "张成成",
              avatar:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F09%2F20180809143413_bcyoy.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894895&t=3256b6a39c0cc283dd5490c4f4ca8ff1",
              time: "2小时",
              device: "Flexpai2",
              comment: "兄弟感觉到位",
              tags: 500,
            },
          ],
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
.all-comment {
  .all-comment__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    &__left {
      line-height: 26px;
      font-size: 18px;
      font-weight: 500;
    }
    &__right {
      &__item {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding-bottom: 2px;
        margin-right: 20px;
        cursor: pointer;
      }
      &__item--active {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin-right: 20px;
        padding-bottom: 2px;
        color: $color-royole;
        border-bottom: 1px solid $color-royole;
        cursor: pointer;
      }
    }
  }
  &__line {
    margin: 15px 0 35px 0;
    height: 1px;
  }
  &__content {
    &__item {
      padding-top: 35px;
      padding-bottom: 24px;
      display: flex;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      //  border-bottom: 1px solid rgba(0,0,0,.1);
      .item__avater {
        margin-right: 8px;
        .item__avater__img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .item__comment {
        width: 688px;
        .item-user {
          .item-user__top {
            display: flex;
            justify-content: space-between;
            .item-user__top__left {
              &__title {
                font-weight: 500;
              }
              &__sub-title {
                font-size: 10px;
                opacity: 0.4;
                &__right {
                  font-size: 0.1rem;
                  font-family: Gotham-Book;
                  font-weight: 300;
                }
              }
            }
            &__right {
              display: flex;
              &__item {
                display: flex;
                opacity: 0.6;
                margin-right: 24px;
                cursor: pointer;
                img {
                  margin-right: 5px;
                }
              }
            }
          }
          .item-user__top__right .item-user__top__right__item:last-child {
            margin-right: 15px;
          }
          .item-user__comment {
            padding: 9px 0 16px;
          }
        }
        .item-reply-list {
          background: rgba(0, 0, 0, 0.03);
          border-radius: 16px;

          .item-reply {
            padding: 16px 24px;
            display: flex;
            .item-reply__avater {
              margin-right: 8px;
              &__img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
            }
            .item-reply__comment {
              flex: 1;
              &__top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .irct__left {
                  .irct__left__title {
                    font-weight: 500;
                  }
                  .irct__left__sub-title {
                    font-size: 10px;
                    opacity: 0.6;
                    &__right {
                      font-size: 0.1rem;
                      font-family: Gotham-Book;
                      font-weight: 300;
                    }
                  }
                }
                .irct__right {
                  display: flex;
                  .irct__right__item {
                    display: flex;
                    align-items: center;
                    margin-right: 24px;
                    cursor: pointer;
                    img {
                      margin-right: 5px;
                    }
                  }
                }
                .irct__right .irct__right__item:nth-child(2) {
                  margin-right: 15px;
                }
              }
              .item-reply__comment__content {
                padding-top: 8px;
              }
            }
          }
        }
      }
    }

    .all-comment__tip {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &__pre {
        color: $color-royole;
      }
      &__img {
        width: 20px;
        transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
      }
    }
    .all-comment__tip--none {
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0.6;
      .all-comment__tip__img--none {
        width: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
